<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小螺号号卡分销系统平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <script src="https://static.91haoka.cn/vue.min.js"></script>
		
		<!-- <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script> -->
		<script src="./element/index.js"></script>
		<link rel="stylesheet" href="./element/index.css">
		<script src="https://cdn.91haoka.cn/axios.min.js" type="text/javascript" charset="utf-8"></script>
		
		<meta name="keywords" content="小螺号,小螺号号卡分销管理系统,手机卡分销系统,定制号卡系统,号卡后台管理,高佣金手机卡,号卡商城,手机卡头部供应商" />
		<meta name="description" content="一个专属于你的号卡分销系统，快速裂变，高效佣金结算，支持信息流推广、直播挂载，无开通费用，免费更新维护、免服务器部署" />
	</head>
	<style type="text/css">
		*{ margin: 0; padding: 0; font-family: "Microsoft YaHei","微软雅黑";}
		::-webkit-scrollbar {width: 0px;}
		
		/* 滚动槽 */
		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
			border-radius: 10px;
		}
		
		/* 滚动条滑块 */
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
		}
		
		::-webkit-scrollbar-thumb:window-inactive {background: rgba(0, 0, 0, 0.1);}
		.el-step__title.is-process{ color: #C0C4CC;}
		.el-step__head.is-process{ color: #C0C4CC; border-color: #C0C4CC;}
	</style>
	<body>
		<div id="app" v-cloak>
			
			<div style="width: 100vw; height: 100vh; background: url('./img/t16.png'); display: flex; justify-content: center; align-items: center;">
				<div style="background: #fff; width: 880px; padding: 60px 0; border-radius: 15px;">
					<div style="color: rgb(0, 0, 0); font-size: 34px; line-height: 40px; text-align: center;">Hi！欢迎使用小螺号</div>
					<div style="width: 400px; margin: 35px auto;">
						<el-steps :align-center="true" :active="1">
						  <el-step title="注册账户"></el-step>
						  <el-step title="域名解析"></el-step>
						  <el-step title="登录配置"></el-step>
						</el-steps>
					</div>
					<div style="display: flex; align-items: center; margin-bottom: 10px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">登录地址(域名)</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" v-model="form.domain" @blur="yanzheng"  placeholder="登录地址(域名)"></el-input></div>
					</div>
					
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">&nbsp;</div>
						<div style=" color: #999; font-size: 14px; width: 450px; ">此为您系统的登录域名，您需要填写一个备案过的域名或者使用已备案的域名生成一个二级域名，请正确填写。</div>
					</div>
					
					
					
					<div style="display: flex; align-items: center; margin-bottom: 30px;" v-if="!kezhuce">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);"></div>
						<div  @click="gos" style="color: rgb(0, 90, 255); font-size: 14px; cursor: pointer;">该域名已注册请 点击前往解析</div>
					</div>
					
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">登录账号</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" v-model="form.username" placeholder="登录账号"></el-input></div>
					</div>
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">登录密码</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" show-password v-model="form.password" placeholder="登录密码"></el-input></div>
					</div>
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">负责人姓名</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" v-model="form.fname" placeholder="负责人姓名"></el-input></div>
					</div>
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">联系电话</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" v-model="form.phonenum" placeholder="联系电话"></el-input></div>
					</div>
					<div style="display: flex; align-items: center; margin-bottom: 30px;">
						<div style="width: 280px; padding-right: 20px; text-align: right; color: rgb(115, 115, 115);">输入验证码</div>
						<div><el-input class="t_del_com_input" style="width: 330px;" v-model="form.code" placeholder="输入验证码"></el-input></div>
						<div @click="getcode" class="t_get_code">
						<div style="border-radius: 5px; margin-left: 20px; font-size: 14px; box-shadow: 0px 10px 20px 0px rgb(163, 207, 255); background: rgb(0, 90, 255); width: 98px; height: 37px; cursor: pointer; line-height: 37px; text-align: center; color: #fff;">{{ codemsg }}</div>
						</div>
					</div>
					<div @click="loginorreg" style="border-radius: 5px; margin-left: 300px; font-size: 16px; box-shadow: 0px 10px 20px 0px rgb(163, 207, 255); background: rgb(0, 90, 255); width: 330px; height: 50px; cursor: pointer; line-height: 50px; text-align: center; color: #fff;">注册</div>
					<div @click="gos" style="color: rgb(0, 90, 255); text-align: center; margin-top: 30px;  font-size: 14px; cursor: pointer;">我已注册，点击前往解析</div>
				</div>
				
				<!-- <div style="width: 1320px; margin: 0 auto;">
					<div style="padding: 20px 0; margin-bottom: 240px;"><img src="img/t2.png"></div>
					<div style="color: rgb(0, 90, 255); font-size: 56px; font-weight: 700; line-height: 66px;  text-align: center; margin-bottom: 20px;">小螺号是什么</div>
					<div style="color: rgb(2, 12, 29); font-size: 24px; line-height: 28px; text-align: center; margin-bottom: 20px;">一个专属于你的独立分销系统</div>
					<div style="color: rgb(120, 125, 133); font-size: 18px; line-height: 21px; text-align: center; margin-bottom: 30px;">自有独立域名·自定系统名称·优化信息流投放·快速佣金结算·免费更新维护</div>
					
					<div style="border-radius: 10px; box-shadow: 0px 10px 20px 0px rgb(163, 207, 255); background: rgb(0, 90, 255); width: 199px; height: 52px; margin: 0 auto; cursor: pointer; line-height: 52px; text-align: center; color: #fff;">免费开通</div>
				</div> -->
				
			</div>
			
		</div>


		<script>
			// var h = document.documentElement.clientWidth / 7.5 + 'px';
			// document.documentElement.style.fontSize = h;


			new Vue({
				el: '#app',
				data: function() {
					return {
						form:{
							domain:"",
							username:"",
							password:"",
							fname:"",
							phonenum:"",
							code:""
						},
						codemsg:"获取验证码",
						kezhuce:true
					}
				},
				created() {
					
				},
				mounted() {

				},
				methods: {
					gos:function(){
						window.open('/xitongpeizhi.html')
					},
					yanzheng:function(){
						// 匹配简单域名，例如 www.example.com
						// const domainRegex = /^([a-zA-Z0-9-]+\.){1,}([a-zA-Z]{2,})$/;
						// // 示例
														
						// if (domainRegex.test(this.form.domain)) {
						//   console.log("域名匹配成功！");
						// } else {
						  
						//   this.$message.error('请输入正确的域名');
						//   return
						// }
						axios.post('/api/domain/validate',{domain:this.form.domain}).then((response)=>{
							if (response.data.msg.code == 0) {
								this.kezhuce = true
								localStorage.setItem('urlx','http://' + this.form.domain + '/hou')
							} else {
								this.$message.error(response.data.msg.info);
								this.kezhuce = false
							}
						})
					},
					loginorreg(){
						// 匹配简单域名，例如 www.example.com
						const domainRegex = /^([a-zA-Z0-9-]+\.){1,}([a-zA-Z]{2,})$/;
						// 示例
														
						if (domainRegex.test(this.form.domain)) {
						  console.log("域名匹配成功！");
						} else {
						  
						  this.$message.error('请输入正确的域名');
						  return
						}
						axios.post('/api/domain/validate',{domain:this.form.domain}).then((response)=>{
							if (response.data.msg.code == 0) {
									this.kezhuce = true
									//注册
									
								
									if(this.form.username==''){
										this.$message.error('请输入登录账号');
										return
									}
									if(this.form.password==''){
										this.$message.error('请输入密码');
										return
									}
									if(this.form.phonenum==''){
										this.$message.error('请输入手机号');
										return
									}
									if(this.form.code==''){
										this.$message.error('请输入验证码');
										return
									}
									if(this.form.fname==''){
										this.$message.error('请输入负责人姓名');
										return
									}
									
									var obg={
										name:this.form.username,
										password:this.form.password,
										mobile:this.form.phonenum,
										sms_code:this.form.code,
										// platform_name:this.form.platfname,
										head_name:this.form.fname,
										domain:this.form.domain
									}
									
													
									axios.post('/api/own/register',obg).then((response)=>{
										if (response.data.msg.code == 0) {
											localStorage.setItem('urlx','http://' + this.form.domain + '/hou')
											this.$message({
												message: '注册成功',
												type: 'success'
											});
											window.open('/xitongpeizhi.html')
										} else {
											this.$message.error(response.data.msg.info);
										}
									})
							} else {
								this.$message.error(response.data.msg.info);
								this.kezhuce = false
							}
						})
						
					},
					getcode(){
						if(this.form.phonenum==''){
							this.$message.error('请输入手机号');
							return
						}
						if(this.form.phonenum!=''){

							if(this.codemsg=='获取验证码'){

								if(this.isPhoneNumberValid(this.form.phonenum.toString()) == true){
									this.codemsg = 60
									var time = setInterval(()=>{
										if(this.codemsg>0){
											this.codemsg--
										}else{
											this.codemsg = '获取验证码'
											clearInterval(time)
										}
									},1000)
							
									axios.post('/api/register/code/send',{
										mobile:this.form.phonenum,
										type:'owner'
									}).then((response)=>{
										if (response.data.msg.code == 0) {
											this.$message({
												message: '发送成功',
												type: 'success'
											});
										} else {
											this.$message.error(response.data.msg.info);
										}
									})
								}else{
									this.$message.error('请检查输入位数或格式');
								}

							}

								
							
						}

						
					
					},
					//发送验证码之前检验号码是否为11位
					isPhoneNumberValid(phoneNumber) {
						// 将手机号中的空格去除
						const sanitizedPhoneNumber = phoneNumber.replace(/\s/g, '');
						// 正则表达式匹配11位数字的手机号
						const regex = /^[0-9]{11}$/;
						return regex.test(sanitizedPhoneNumber);
					}
				}
			});
		</script>
	</body>
</html>
